<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />
    <script src="intelxdk.js"></script>
    <script src="cordova.js"></script>
    <script src="xhr.js"></script>
    
    <script src="js/app.js"></script>
    <script src="js/init-app.js"></script>
    <script src="js/init-dev.js"></script>
    
    <script type="application/javascript" src="js/jquery.min.js"></script>
    <script type="application/javascript" src="js/md5.js"></script>
    <script type="application/javascript" src="js/jquery.cookie.min.js"></script>
    <script type="application/javascript" src="js/menu.js"></script>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>

<style type="text/css">        
    
@media screen and (orientation:portrait) and (max-height: 1000px){
    #wrapper{
        width: 100%;
        height: 100%;
        margin-left: 30%;
        margin-top: 50%;
    }
    #background{
        position:fixed;
        margin-left: -28%;
        margin-top: -70%;
    }
    #img{
        content: url('img/register/portrait.png');
        position: fixed;
        min-height: 100%;
        max-height: 20000px;
        max-width: 100%;
    }
    
    #nameDiv{
        position: fixed;
        margin-top:-10%;
        margin-left:-10%;
    }
    #passDiv{
        position: fixed;
        margin-top:5%;
        margin-left:-10%;
    }
    #confirmpassDiv{
        position: fixed;
        margin-top:20%;
        margin-left:-10%;
    }
    #emailDiv{
        position: fixed;
        margin-top:35%;
        margin-left:-10%;
    }
    /*input fields*/
    #name, #password, #cnfPasword, #email{
        position: fixed;
        color:black;
        background-color: transparent;
        font-size: 20px;
        width: 80%;
        min-height: 40px;
        margin-left: -9%;
        margin-top: 0.5%;
        outline: 0;
    }
        
    #buttons{
        position: fixed;
        margin-top: 55%;
        margin-left: -18%;
    }
    #btnregister{
        float:left;
        width:90%;
    }
    
    .input{
        content: url(img/input.png);
        width:20%;
        position: fixed;
        margin-left:-10%;
        width: 83%;
        min-height: 50px;
    }
}
@media screen and (orientation:landscape) and (max-width: 1000px){    
    #wrapper{
        width: 100%;
        height: 100%;
        margin-left: 30%;
        margin-top: 50%;
    }
    #background{
        position:fixed;
        margin-left: -28%;
        margin-top: -48%;
    }
    #img{
        content: url('img/register/landscape.png');
        position: fixed;
        min-height: 100%;
        max-height: 20000px;
        max-width: 100%;
    }
    
    #nameDiv{
        position: fixed;
        margin-top:-40%;
        margin-left:-10%;
    }
    #passDiv{
        position: fixed;
        margin-top:-30%;
        margin-left:-10%;
    }
    #confirmpassDiv{
        position: fixed;
        margin-top:-20%;
        margin-left:-10%;
    }
    #emailDiv{
        position: fixed;
        margin-top:-10%;
        margin-left:-10%;
    }
    /*input fields*/
    #name, #password, #cnfPasword, #email{
        position: fixed;
        color:black;
        background-color: transparent;
        font-size: 30px;
        max-height: 100%;
        margin-left: 1%;
        margin-top: 0%;
        outline: 0;
        width: 58%;
    }
        
    #buttons{
        position: fixed;
        margin-top: -1%;
        margin-left: 0%;
    }
    #btnregister{
        float:left;
        width:60%;
    }
    
    .input{
        content: url(img/input.png);
        width:60%;
        position: fixed;
        margin-left:.5%;
        margin-top:-.5%;
        min-height: 40px;
    }
}



@media screen and (orientation:portrait) and (min-height: 1000px){
    #wrapper{
        position:fixed;
        width: 100%;
        height: 100%;
        margin-top: 0%;
    }
    #background{
        position:fixed;
        margin-left: 0%;
        margin-top: -5%;
		width: 100%;
		height: 100%;
    }
    #img{
        position: fixed;
        content: url('img/register/portrait.png');
        min-height: 100%;
        max-height: 20000px;
        max-width: 100%;
    }
    
    #nameDiv{
        position: fixed;
        margin-top: 35%;
        margin-left: 15%;
    }
    #passDiv{
        position: fixed;
        margin-top: 42%;
        margin-left: 15%;
    }
    #confirmpassDiv{
        position: fixed;
        margin-top: 49%;
        margin-left: 15%;
    }
    #emailDiv{
        position: fixed;
        margin-top: 56%;
        margin-left: 15%;
    }
    /*input fields*/
    #name, #password, #cnfPasword, #email{
        position: absolute;
        color:white;
        background-color: transparent;
        font-size: 50px;
        width: 550px;
        min-height: 60px;
        top: 5px;
        outline: 0;
    }
        
    #buttons{
        position: fixed;
        margin-top: 65%;
        margin-left: 10%;
    }
    #btnregister{
        width:100%;
    }
    
    .input{
        position: absolute;
        content: url(img/input.png);
        width: 560px;
        min-height: 70px;
    }
}
    
@media screen and (orientation:landscape) and (min-width: 1000px){      
    #wrapper{
        width: 100%;
        height: 100%;
        margin-left: 0%;
        margin-top: 0%;
    }
    #background{
        position:fixed;
        margin-left: 0%;
        margin-top: 0%;
    }
    #img{
        content: url('img/register/landscape.png');
        position: fixed;
        max-height: 20000px;
        max-width: 100%;
    }
    #nameDiv{
        position: fixed;
        margin-top: 20%;
        margin-left: 10%;
    }
    #passDiv{
        position: fixed;
        margin-top: 35%;
        margin-left: 10%;
    }
    #confirmpassDiv{
        position: fixed;
        margin-top: 50%;
        margin-left: 10%;
    }
    #emailDiv{
        position: fixed;
        margin-top: 65%;
        margin-left: 10%;
    }
    /*input fields*/
    #name, #password, #cnfPasword, #email{
        position: absolute;
        color:white;
        background-color: transparent;
        font-size: 60px;
        width: 650px;
        min-height: 80px;
        left: 160px;
        outline: 0;
    }
        
    #buttons{
        position: fixed;
        margin-top: 80%;
        margin-left: 22%;
    }
    #btnregister{
        float:left;
        width:70%;
    }
    
    .input{
        position: absolute;
        content: url(img/input.png);
        width: 660px;
        left:155px;
        height: 90px;
    }
}
    
</style>
    
</head>    
    
<body> 
    <div id='wrapper'>
        <div id='background'>
            <img alt='register' id='img'/>
        </div>
        <div id='nameDiv'>
            <img alt='input' class='input'/>
            <input type='text' placeholder="Username" id='name' tabindex=1 name='name' />
        </div>
        <div id='passDiv'>
            <img alt='input' class='input'/>
            <input type='password' placeholder="Password" id='password' tabindex=2  name='pass' />
        </div>
        <div id='confirmpassDiv'>
            <img alt='input' class='input'/>
            <input type='password' placeholder="Confirm Password" id='cnfPasword' tabindex=3  name='cnfPass' />
        </div>
        <div id='emailDiv'>
            <img alt='input' class='input'/>
            <input type='text' placeholder="Email address" id='email' tabindex=4  name='email' />
        </div>
        <div id='buttons'>
            <input type="image" id='btnregister' alt='btnregister' src='img/register/register.png' tabindex=5 onclick='initRegister()'/>
        </div>
    </div>
    
    <script>
        document.addEventListener("keypress", onkeypress, false);
        
        function onkeypress(e){
            if(e.which == 13 && document.activeElement.id == 'name')
            {
                $('#password').focus();
            }
            else if(e.which == 13 && document.activeElement.id == 'password')       
            {
                $('#cnfPasword').focus();
            }
            else if(e.which == 13 && document.activeElement.id == 'cnfPasword')       
            {
                $('#email').focus();
            }
            else if(e.which == 13 && document.activeElement.id == 'email')       
            {
                initRegister();
            }
        }
        
        function isEmail(email) {
            var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            return regex.test(email);
        }
        
        function initRegister(){
            var name = document.getElementById('name').value,
                passLng = document.getElementById('password').value.length,
                confPassLng = document.getElementById('cnfPasword').value.length,
                email = document.getElementById('email').value;
            
            if( name != '' && passLng > 0 && confPassLng > 0 && email != '' ){
                
                if (!/^[a-zA-Z0-9]+$/.test($('#name').val()))
                {
                    alert('Username can only contain letters and numbers');
                }
                else if (!/^[a-zA-Z0-9]+$/.test($('#password').val()))
                {
                    alert('Password can only contain letters and numbers');
                }
                else if(!isEmail(email))
                {
                    alert('Not a valid email');
                }
                else{
                    var pass = md5(document.getElementById('password').value),
                        confPass = md5(document.getElementById('cnfPasword').value);

                    if(pass == confPass)
                    {
                        register(name, email, pass);
                    }
                    else
                    {
                        alert('Passwords do no match');
                    }
                }
            }
            else{
                alert('Every field needs to be filled in');
            }
        }
    </script>
</body>
</html>
